<script setup>
import { ref, defineAsyncComponent, markRaw, shallowRef } from "vue";
import useParam from "@/hooks/useParam";

// 导入所有的md文件路径
const docs = import.meta.glob("@docs/language/**/*.md");

// 过滤当前的路由路径，并将根据此路径加载 md 组件
const asyncComponent = shallowRef();
useParam((param) => {
    if (!param.value?.length) return;
    const prefixPath = `${param.value.join("/")}.md`;
    let component = null;
    for (const path in docs) {
        if (path.includes(prefixPath)) {
            component = docs[path];
            break;
        }
    }
    asyncComponent.value = defineAsyncComponent(
        markRaw(
            component || { loader: () => import("@/component/NotFound.vue") },
        ),
    );
});
</script>

<template>
    <component :is="asyncComponent" />
</template>

<style scoped></style>
